<template>
	<z-container left-icon-size="0">
		<uv-swiper height="500rpx" :list="state.banners" keyName="image"></uv-swiper>
		<view class="ss-p-x-32 ss-p-b-24">
			<view @tap="handleLogin" class="car-store-box ss-flex ss-p-l-40 box-sizing">
				<z-avatar :src="userInfo.avatar" size="116rpx"></z-avatar>
				<view v-if="isLogin" class="ss-flex-col ss-m-l-32">
					<view class="fs-32 font-w-500">{{ userInfo.nickname }}</view>
					<view class="ss-flex ss-m-t-8">
						<view class="fc-dark9">{{ userInfo.store?.name }}</view>
						<view class="tag">{{ userInfo.storesf?.name }}</view>
					</view>
				</view>
				<view v-else class="ss-m-l-32 font-w-500 fs-32">账号密码登录</view>
			</view>
			<uv-gap height="32rpx"></uv-gap>
			<z-button @tap="createOrderDo" :disabled="!isUsed">创建订单</z-button>
			<uv-gap height="32rpx"></uv-gap>
			<z-title>最近订单</z-title>
			<uv-gap height="30rpx"></uv-gap>
			<OrderList :list="state.pagination.data" />
			<z-loadMore text="没有最近订单~" :status="state.loadStatus" :list="state.pagination.data" ></z-loadMore>
		</view>
	</z-container>
</template>

<script setup>
	import sheep from '@/sheep'
	import OrderList from "@/pages/components/OrderList.vue"
	import { loginShowModal } from '@/sheep/hooks/useModal';
	import { QUANXIAN } from "@/sheep/enu/index.js"
	const pagination = {
	  data: [],
	  current_page: 1,
	  total: 1,
	  last_page: 1,
	};
	const state = reactive({
		showPopup:false,
		info:{},
		loadStatus:'loading',
		pagination: {
		  data: [],
		  current_page: 1,
		  total: 1,
		  last_page: 1,
		},
		banners:[]
	})
	const userInfo = computed(() => sheep.$store('user').userInfo)
	const isLogin = computed(() => sheep.$store('user').isLogin)
	const isUsed = computed(() => {
		if(!isLogin.value) return false
		let storesf = userInfo.value.storesf
		if(storesf && storesf.quan_iddata){
			if(storesf.quan_iddata.split(',').includes(QUANXIAN.CREATE)) return true
			else return false
		}
		return false
	})
	onLoad(() => {
		// getList()
	})
	onShow(() => {
		// if(!isLogin.value) {
		// 	uni.reLaunch({
		// 		url: '/pages/login/login'
		// 	})
		// }
		if(!state.pagination.data.length) getList()
	})
	onMounted(() => {
		uni.$on('onReachIndex',() => {
			onReach()
		})
	})
	onUnmounted(() => {
		uni.$off('onReachIndex')
	})
	function handleLogin() {
		if (!isLogin.value) {
			sheep.$router.go('/pages/login/login')
		}
	}
	function createOrderDo(){
		if(!isLogin.value) return loginShowModal(true)
		if(!isUsed.value) return
		sheep.$router.go('/pages/order/create')
	}
	async function getList(page = 1, limit = 10){
		state.loadStatus = 'loading';
		let res = await sheep.$api.user.homePage({
		  limit,
		  page
		});
		uni.stopPullDownRefresh()
		if (res.code === 1) {
		  let list = state.pagination.data.concat(res.data.orders.data);
		  state.pagination = {
		    ...res.data.orders,
		    data: list,
		  };
		  
		  state.banners = res.data.banar.map(item => {
			  return {
			     image:sheep.$url.cdn(item.banar_image),

			   }
		  })
			
		  if (state.pagination.current_page < state.pagination.last_page) {
		    state.loadStatus = 'loadmore';
		  } else {
		    state.loadStatus = 'nomore';
		  }
		}
	}
	// 加载更多
	function loadmore() {
	  if (state.loadStatus !== 'nomore') {
	    getList(state.pagination.current_page + 1);
	  }
	}
	
	function onReach(){
		  state.pagination = pagination;
		  getList();
		  setTimeout(function () {
		    uni.stopPullDownRefresh();
		  }, 800);
	}
	
	// 上拉加载更多
	onReachBottom(() => {
	  loadmore();
	});
	
	//下拉刷新
	onPullDownRefresh(() => {
	  state.pagination = pagination;
	  getList();
	  setTimeout(function () {
	    uni.stopPullDownRefresh();
	  }, 800);
	});
</script>

<style lang="scss" scoped>
	.car-store-box {
		height: 196rpx;	
		background: linear-gradient( 212deg, rgba(255,255,255,0.6) 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 4rpx solid #FFFFFF;
		margin: auto;
		margin-top: -98rpx;
		position: relative;
		.tag {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid $main-color;
			color: $main-color;
			font-weight: 400;
			font-size: 22rpx;
			padding: 4rpx 12rpx;
			border-radius: 8rpx;
			box-sizing: border-box;
			margin-left: 24rpx;
		}
	}

</style>